
<template>
  <div class="Main">
    <div class="MainTitle">{{itemId?'编辑':'新增'}}采购业务</div>
    <div class="MianContent">
      <div class="MainTopAction"></div>

      <div class="formBox" style="width: 65%">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
        <h1 style="font-weight:bold;margin-bottom:20px">基本信息</h1>
          <a-form-model-item ref="purchase_no" label="合同编号" prop="purchase_no">
            <a-input
              v-model="form.purchase_no"
              placeholder="请输入合同编号"
              allowClear
            />
          </a-form-model-item>
          <a-form-model-item ref="title" label="合同名称" prop="title">
            <a-input
              v-model="form.title"
              placeholder="请输入合同名称"
              allowClear
              type="text"
            />
          </a-form-model-item>
          <a-form-model-item ref="desc" label="合同简介" prop="desc">
            <a-textarea
              placeholder="请输入简介，最长50字！"
              :maxLength="50"
              v-model="form.desc"
              :rows="4"
            />
          </a-form-model-item>
          <a-form-model-item ref="name" label="经办人" prop="name">
            <a-input
              v-model="form.name"
              placeholder="请输入经办人"
              allowClear
              type="text"
            />
          </a-form-model-item>
          <a-form-model-item ref="phone" label="联系电话" prop="phone">
            <a-input
              v-model="form.phone"
              placeholder="请输入联系电话"
              allowClear
              type="number"
            />
          </a-form-model-item>
          <a-form-model-item ref="contract_price" label="合同价格" prop="contract_price">
            <a-input
              v-model="form.contract_price"
              placeholder="请输入合同价格"
              allowClear
              type="number"
            />
          </a-form-model-item>

          <a-form-model-item ref="" label="合同对象" prop="">
            <div class="flex align-center">
              <a-input
                v-model="hospitalName"
                placeholder="请输入医院名称查询"
                allowClear
                type="text"
              />
              <a-button
                style="margin-left: 10px"
                type="primary"
                @click="addBrand('hospital')"
                >搜索</a-button
              >
            </div>
            <div
              class="selectHospitalList flex align-center justify-between"
              style="margin-top: 10px"
              v-for="(item,index) in hospitalCheckItemList"
              :key="index"
            >
              <div class="flex align-center">
                <img
                    class="imgBox"
                  :src="item.logo"
                  alt=""
                />
                <div class="nameTitle">{{item.title}}</div>
              </div>
              <a-button type="default" @click="addBrand('hospital')">重新选择</a-button>
            </div>
          </a-form-model-item>
          
          <a-form-model-item ref="" label="采购对象" prop="">
            <div class="flex align-center">
              <a-input
                v-model="productName"
                placeholder="请输入药品名称查询"
                allowClear
                type="text"
              />
              <a-button
                style="margin-left: 10px"
                type="primary"
                @click="addBrand('product')"
                >搜索</a-button
              >
            </div>
            <!-- 采购对象列表 -->
            <div
              class="selectHospitalList flex align-center justify-between"
              style="margin-top: 10px"
              v-for="(item,index) in productCheckItemList"
              :key="index"
            >
              <div class="flex align-center" style="width:85%;padding-right:15px;box-size:border-border;">
                <img
                    class="imgBox"
                  :src="item.logo"
                  alt=""
                />
                <div class="nameTitle" style="margin: 0 30px 0 10px;">{{item.title}}</div>
                <div class="price" style="margin-left:auto;">￥{{item.sale_price}}</div>
              </div>
              <a-button type="default" @click="deleteFn('product',index)">删除</a-button>
            </div>
          </a-form-model-item>

        <h1 style="font-weight:bold;margin:50px 0 20px">分账信息</h1>
        <a-form-model-item ref="" label="药品供应商" prop="">
            <div class="flex align-center">
              <a-input
                v-model="providerName"
                placeholder="请输入药品供应商名称查询"
                allowClear
                type="text"
              />
              <a-button
                style="margin-left: 10px"
                type="primary"
                @click="addBrand('provider')"
                >搜索</a-button
              >
            </div>
            <div
              class="selectHospitalList flex align-center justify-between"
              style="margin-top: 10px"
              v-for="(item,index) in providerCheckItemList"
              :key="index"
            >
              <div class="flex align-center" style="width:85%;padding-right:10px;">
                <img
                    class="imgBox"
                  :src="item.store_logo"
                  alt=""
                />
                <div class="nameTitle" style="margin: 0 30px 0 10px;">{{item.store_name}}</div>
                <div class="price flex align-center" style="margin-left:auto;">
                    分佣比例：<a-input style="width:150px;padding-right:0;" v-model="item.provider_rate" placeholder="请输入分佣比例" allowClear type="number" />
                </div>
              </div>
              <a-button type="default" @click="deleteFn('provider',index)">删除</a-button>
            </div>
        </a-form-model-item>
        <a-form-model-item ref="" label="销售业务人员" prop="">
            <div class="flex align-center">
              <a-input
                v-model="salerName"
                placeholder="请输入销售业务人员名称查询"
                allowClear
                type="text"
              />
              <a-button
                style="margin-left: 10px"
                type="primary"
                @click="addBrand('saler')"
                >搜索</a-button
              >
            </div>
            <div
              class="selectHospitalList flex align-center justify-between"
              style="margin-top: 10px"
              v-for="(item,index) in salerCheckItemList"
              :key="index"
            >
              <div class="flex align-center" style="width:85%;padding-right:10px;">
                <img
                    class="imgBox"
                  :src="item.store_logo"
                  alt=""
                />
                <div class="nameTitle" style="margin: 0 10px">{{item.store_name}}</div>
                <!-- <div class="name" style="margin: 0 10px">药品公司</div> -->
                <div style="margin: 0 10px">{{item.mobile}}</div>
                <div class="price flex align-center" style="margin-left:auto;">
                    分佣比例：<a-input style="width:150px;padding-right:0;" v-model="item.saler_rate" placeholder="请输入分佣比例" allowClear type="number" />
                </div>
              </div>
              <a-button type="default" @click="deleteFn('saler',index)">删除</a-button>
            </div>
          </a-form-model-item>
        </a-form-model>
      </div>

      <div class="TableView flex align-center" style="margin-top:80px;width:70%;">
        <div style="margin: 0 auto;">
          <a-button style="padding: 0 40px;" type="primary" @click="submitBtn">提交</a-button>
        </div>
      </div>
      <a-modal
        :title="ModalTitle"
        v-if="visible"
        v-model="visible"
        :width="820"
        :centered="true"
        :maskClosable="false"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <div>
            <div class="flex align-center" style="margin-bottom:10px;">
              <a-input
                v-model="keyword"
                placeholder="请输入信息查询"
                allowClear
                type="number"
              />
              <a-button
                style="margin-left: 10px"
                type="primary"
                @click="searchList"
                >搜索</a-button
              >
            </div>
            <a-table
                :columns="listfields"
                :data-source="listData"
                bordered
                size="middle"
                :pagination="false"
                :row-selection="{
                    selectedRowKeys: selectedRowKeys,
                    onChange: onSelectChange,
                    type:checkType,
                    onSelect: onSelect, 
                    onSelectAll: onSelectAll,
                }"
            >
                <div slot="indexNum" slot-scope="row, index">
                {{ (pageno * 1 - 1) * pagesize + (index.indexNum * 1 + 1) }}
                </div>
                <div slot="action" slot-scope="row, index">
                    <a-button
                        style="margin: 0 10px 0 0"
                        type="primary"
                        size="small"
                        @click="EditBrand(index)"
                        >编辑</a-button
                    >
                </div>
                <div slot="logo" slot-scope="row, index">
                <div @click="ClickLookImage(row)" v-if="row">
                    <img :src="row" style="width: 50px; height: 50px" />
                </div>
                </div>

            </a-table>
            <Pagination
                :total="total"
                v-model="pageno"
                :pageSize.sync="pagesize"
                @change="handlePageChange"
                @onShowSizeChange="onShowSizeChange"
            ></Pagination>
        </div>
        <a-modal v-model="LookImages" :footer="null" centered>
            <div style="margin: 10px;">
                <img :src="SelectImg" style="width: 100%;height: 100%;">
            </div>
        </a-modal>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import { HospitalProcureIndex } from "@/views/Columns/HospitalProcure";
import {
  HospitalList,
  GetProductList,
  GetProviderList,
  GetSalerList,
  HospitalPurchaseOrderAdd,
  HospitalPurchaseOrderEdit,
  HospitalPurchaseOrderView
} from "@/api/api.js";
import env from "@/config/env";
import request from "@/utils/request";
import Vue from "vue";

export default {
  name: "list",
  components: {
    Pagination,
  },
  data() {
    return {
      total: 0, //定义初始有多少条数据
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      keyword: "",
      ModalTitle: "合同对象",

      SelectImg:'',
      LookImages: false,

      OrderStatus: "",
      listfields: [
        {title: "序号", dataIndex: "id", scopedSlots: { customRender: "indexNum" }, align: "center", width: 60, },
        {title: "名称", dataIndex: "title", align: "center", },
        {title: "Logo",  dataIndex: "logo", scopedSlots: { customRender: "logo" }, align: "center",},
        // {title: "操作", dataIndex: "action", scopedSlots: { customRender: "action" }, align: "center",},
      ], //表头列表
      listData: [], //表格数据

      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      visible: false,
      form: {
        purchase_no:'',
        desc:'',
        name:'',
        phone:'',
        contract_price:'',
      },
      type: undefined,
      rules: {
        purchase_no: [{ required: true, message: "请输入合同编号!", trigger: "blur" }],
        title: [
          { required: true, message: "请输入合同名称!", trigger: "blur" },
        ],
        desc: [{ required: true, message: "请输入合同简介!", trigger: "blur" }],
        name: [
          { required: true, message: "请输入经办人!", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入联系电话!", trigger: "blur" },
        ],
        contract_price: [
          { required: true, message: "请输入合同价格!", trigger: "blur" },
        ],
      },
      itemId: null, //数据源id

      hospitalName:'',
      productName:'',
      providerName:'',
      salerName:'',

      searchType:'',
      selectedRowKeys: [],
      selectedRows: [],
      checkType:'checkbox',

      hospitalCheckId:[], //选择的医院id
      productCheckId:[], //选择的药品id
      providerCheckId:[], //选择的供应商id
      salerCheckId:[], //选择的销售人员id

      hospitalCheckItemList:[], //选择的医院项
      productCheckItemList:[], //选择的药品项
      providerCheckItemList:[], //选择的供应商项
      salerCheckItemList:[], //选择的销售人员项
      

      //   creatLoading: false,
    };
  },
  computed: {
    ...mapState({}),
  },
  created() {},
  mounted() {
    let that = this;
    that.itemId = that.$route.query.itemId;
    console.log(that.itemId,'itemId')
    if(that.itemId){
      that.HospitalPurchaseOrderView()
    }
  },
  methods: {
    ...mapActions({}),
    
    // 查看图片
    ClickLookImage(row){
      const that = this;
      that.LookImages = true;
      that.SelectImg = row;
    },

    // 上下架
    async BrandStatus(row) {
      const that = this;
      let params = {
        id: row.ID,
        status: row.status ? false : true,
      };
      let res = await BrandStatus(params);
      if (res.data.code == 0) {
        showSuccess("操作成功！");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    // 删除按钮
    async DeleteItem(row) {
      const that = this;
      let params = {
        id: row.id,
      };
      let res = await GradeDel(params);
      if (res.data.code == 1) {
        showSuccess("删除成功！");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    // 新增按钮
    addBrand(type) {
      const that = this;
      that.searchType = type;
      let listfields1 = [
        {title: "序号", dataIndex: "id", scopedSlots: { customRender: "indexNum" }, align: "center", width: 60, },
        {title: "Logo",  dataIndex: "logo", scopedSlots: { customRender: "logo" }, align: "center",},
        {title: "名称", dataIndex: "title", align: "center", },
        // {title: "操作", dataIndex: "action", scopedSlots: { customRender: "action" }, align: "center",},
      ];
      let listfields2 = [
        {title: "序号", dataIndex: "id", scopedSlots: { customRender: "indexNum" }, align: "center", width: 60, },
        {title: "Logo",  dataIndex: "logo", scopedSlots: { customRender: "logo" }, align: "center",},
        {title: "名称", dataIndex: "title", align: "center", },
        {title: "价格",  dataIndex: "sale_price", align: "center",},
        // {title: "操作", dataIndex: "action", scopedSlots: { customRender: "action" }, align: "center",},
      ];
      let listfields3 = [
        {title: "序号", dataIndex: "id", scopedSlots: { customRender: "indexNum" }, align: "center", width: 60, },
        {title: "Logo",  dataIndex: "store_logo", scopedSlots: { customRender: "logo" }, align: "center",},
        {title: "名称", dataIndex: "store_name", align: "center", },
        // {title: "操作", dataIndex: "action", scopedSlots: { customRender: "action" }, align: "center",},
      ];
      let listfields4 = [
        {title: "序号", dataIndex: "id", scopedSlots: { customRender: "indexNum" }, align: "center", width: 60, },
        {title: "Logo",  dataIndex: "store_logo", scopedSlots: { customRender: "logo" }, align: "center",},
        {title: "名称", dataIndex: "store_name", align: "center", },
        {title: "联系电话", dataIndex: "mobile", align: "center", },
        // {title: "操作", dataIndex: "action", scopedSlots: { customRender: "action" }, align: "center",},
      ];

      if(type == 'hospital'){
        that.ModalTitle = "合同对象";
        that.listfields  = listfields1;
        that.checkType = 'radio';
        that.keyword = that.hospitalName;
        that.selectedRowKeys = that.hospitalCheckId;
        that.selectedRows = that.hospitalCheckItemList;
      }else if(type == 'product'){
        that.ModalTitle = '采购对象'
        that.listfields  = listfields2;
        that.checkType = 'checkbox';
        that.keyword = that.productName;
        that.selectedRowKeys = that.productCheckId;
        that.selectedRows = that.productCheckItemList;
      }else if(type == 'provider'){
        that.ModalTitle = '药品供应商'
        that.listfields  = listfields3;
        that.checkType = 'checkbox';
        that.keyword = that.providerName;
        that.selectedRowKeys = that.providerCheckId;
        that.selectedRows = that.providerCheckItemList;
      }else if(type == 'saler'){
        that.ModalTitle = '销售业务人员'
        that.listfields  = listfields4;
        that.checkType = 'checkbox';
        that.keyword = that.salerName;
        that.selectedRowKeys = that.salerCheckId;
        that.selectedRows = that.salerCheckItemList;
      }
      that.searchList();
      that.visible = true;
    },

    // 打开弹框后搜索按钮
    async searchList(type){
        const that = this;
        if(type != 'changePage'){
            that.pageno = 1
            that.pagesize = 10
        }
        let res;
        let params = {
            keyword:that.keyword,
            page:that.pageno,
            pageSize:that.pagesize
        }
        if(that.searchType == 'hospital'){
            res = await HospitalList(params)
        }else if(that.searchType == 'product'){
            res = await GetProductList(params)
        }else if(that.searchType == 'provider'){
            res = await GetProviderList(params)
        }else if(that.searchType == 'saler'){
            res = await GetSalerList(params)
        }
        if(res.data.code == 1){
            const data = res.data.data;
            if (data.list.length > 0) {
                data.list.forEach((item, index) => {
                    item.key = item.id;
                    item.indexNum = index;
                    // item.CreatedAt = new Date(item.CreatedAt).toLocaleString(); //地区时间转换
                    item.create_time = that
                    .$moment(item.create_time * 1000)
                    .format("YYYY-MM-DD  HH:mm:ss"); //时间戳转换成时间
                });
            }
            // console.log(data);
            that.total = data.count;
            that.listData = data.list;
        } else {
            showError(res.data.msg);
        }
    },

    deleteFn(type,index){
      const that = this;
      if(type == 'product'){
        that.productCheckId.splice(index,1)
        that.productCheckItemList.splice(index,1)
      }else if(type == 'provider'){
        that.providerCheckId.splice(index,1)
        that.providerCheckItemList.splice(index,1)
      }else if(type == 'saler'){
        that.salerCheckId.splice(index,1)
        that.salerCheckItemList.splice(index,1)
      }
    },

    // 提交按钮
    submitBtn(){
        const that = this;
        that.$refs["ruleForm"].validate(async (valid) => {
            if (valid) {
              if(!that.hospitalCheckId.length){
                showError('请选择合同对象！')
                return
              }
              if(!that.productCheckId.length){
                showError('请选择采购对象！')
                return
              }

              if(!that.providerCheckId.length){
                showError('请选择药品供应商！')
                return
              }else{
                for(let i = 0;i<that.providerCheckItemList.length;i++){
                  if(!that.providerCheckItemList[i].provider_rate){
                    showError('请填写完整药品供应商分佣比例！')
                    return
                  }
                }
              }

              if(!that.salerCheckId.length){
                showError('请选择销售业务人员！')
                return
              }else{
                for(let i = 0;i<that.salerCheckItemList.length;i++){
                  if(!that.salerCheckItemList[i].saler_rate){
                    showError('请填写完整销售业务人员分佣比例！')
                    return
                  }
                }
              }

              let provider = [];
              that.providerCheckItemList.forEach(item=>{
                provider.push({provider_id:item.id,provider_rate:item.provider_rate})
              })

              let saler = [];
              that.salerCheckItemList.forEach(item=>{
                saler.push({saler_id:item.id,saler_rate:item.saler_rate})
              })

              let params = {
                  purchase_no: that.form.purchase_no,
                  title:that.form.title,
                  desc: that.form.desc,
                  name: that.form.name,
                  phone: that.form.phone,
                  contract_price: that.form.contract_price,
                  hospital_id:that.hospitalCheckId.join(','),
                  product_id:that.productCheckId.join(','),
                  provider:JSON.stringify(provider),
                  saler:JSON.stringify(saler)
              };
              let res;
              if (that.itemId) {
                  //编辑
                  params.id = that.itemId;
                  res = await HospitalPurchaseOrderEdit(params);
              } else {
                  // 新增
                  res = await HospitalPurchaseOrderAdd(params);
              }
              if (res.data.code == 1) {
                  showSuccess(that.itemId ? "编辑成功" : "添加成功");
                  that.$router.back()
                  // that.visible = false;
                  // that.GetList();
              } else {
                  showError(res.data.msg);
              }
            } else {
            //   that.creatLoading = false;
            }
        });
    },

    // 获取详情
    async HospitalPurchaseOrderView() {
      const that = this;
      let res = await HospitalPurchaseOrderView({ id: that.itemId });
      if(res.data.code == 1){
        let data = res.data.data
        that.form = {...data};

        that.hospitalCheckId = [data.hospital.id];
        that.hospitalCheckItemList = [data.hospital];

        that.productCheckId = data.product_id.split(',');
        that.productCheckItemList = data.product_list;
        that.productCheckId = that.productCheckId.map(Number)

        let arrId = [];
        data.provider = JSON.parse(data.provider);
        data.provider.forEach(item=>{
          arrId.push(item.provider_id)
        })
        that.providerCheckId = arrId;
        that.providerCheckItemList = data.provider_list;

        
        let arrIds = [];
        data.saler = JSON.parse(data.saler);
        data.saler.forEach(item=>{
          arrIds.push(item.saler_id)
        })
        that.salerCheckId = arrIds;
        that.salerCheckItemList = data.saler_list;

      }
    },

    // 弹窗取消关闭
    handleCancel() {
      const that = this;
    //   that.$refs.ruleForm.resetFields();
      console.log(that.selectedRows,'====')
      console.log(that.providerCheckItemList,'====')
      that.listData = [];
      that.searchType = '';
      that.keyword = '';
      that.pageno = 1;
      that.pagesize = 10;
      that.total = 0;
      that.visible = false;
      that.selectedRowKeys = [];
      that.selectedRows = [];
    },
    // 弹窗确认按钮
    handleOk() {
      const that = this;
      //   that.creatLoading = true;
      console.log(that.selectedRowKeys,'selectedRowKeys')
      console.log(that.selectedRows,'selectedRows')
        if(that.searchType == 'hospital'){
            that.hospitalCheckId = that.selectedRowKeys;
            that.hospitalCheckItemList = [...that.selectedRows];
        }else if(that.searchType == 'product'){
            that.productCheckId = that.selectedRowKeys;
            that.productCheckItemList = [...that.selectedRows];
        }else if(that.searchType == 'provider'){
            that.providerCheckId = that.selectedRowKeys;
            // that.selectedRows.forEach(item=>{item.com_rate = item.com_rate?item.com_rate:''})
            that.providerCheckItemList = [...that.selectedRows];
        }else if(that.searchType == 'saler'){
            that.salerCheckId = that.selectedRowKeys;
            // that.selectedRows.forEach(item=>{item.com_rate = item.com_rate?item.com_rate:''})
            that.salerCheckItemList = [...that.selectedRows];
        }

        that.handleCancel()
    },

    // 提交按钮
    // submitBtn(){
    //     const that = this;
    //     console.log(that.providerCheckItemList,'//')
    // },

    // 选择type获取列表
    selectType() {
      const that = this;
      that.GetList();
    },

    InputChange(e) {
      let that = this;
      if (e.target.value == "") {
        that.GetList();
      }
    },
    SeachKeyword() {
      let that = this;
      that.GetList();
    },
    GoOrderDetail(row) {
      this.$router.push({
        name: "OrderInfo",
        query: { id: row.id, back: "OrderList" },
      });
    },
    // 获取数据列表API
    async GetList() {
      let that = this;
      let params = {
        type: that.type,
        keywords: that.keyword,
        page: that.pageno,
        pageSize: that.pagesize,
      };
      const res = await GradeList(params);
      if (res.data.code == 1) {
        // console.log(res.data);
        const data = res.data.data;
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.key = item.id;
            item.indexNum = index;
            // item.CreatedAt = new Date(item.CreatedAt).toLocaleString(); //地区时间转换
            item.create_time = that
              .$moment(item.create_time * 1000)
              .format("YYYY-MM-DD  HH:mm:ss"); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.total = data.count;
        that.listData = data.list;
      } else {
        showError(res.data.msg);
      }
    },

    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      let that = this;
      that.pageno = pageno;
      that.pagesize = pagesize;
      that.searchList('changePage')
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      let that = this;
      //pagesize 变化的回调
      that.pageno = current;
      that.pagesize = size;
      that.searchList('changePage')
    },
    onSelectChange(selectedRowKeys,selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
    //   this.selectedRows = selectedRows;
    //   console.log(this.selectedRows,'选中的数据项')
    },
    
    onSelect(record, selected) {
        const that = this;
        let arr = JSON.parse(JSON.stringify(that.selectedRows)) //赋值一个需要数组
        selected ? arr.push(record) : arr.splice(
            arr.findIndex(x => x.id === record.id),
            1
        )
        that.selectedRows = arr
        // console.log(this.selectedRows,'onselect')
    },
    onSelectAll(selected, selectedRows, changeRows) {
        this.selectedRows = selected
        ? this.selectedRows.concat(changeRows)
        : this.selectedRows.filter(x => !changeRows.find(i => i.id === x.id))

        console.log(this.selectedRows,'onselectall')
    },
  },
};
</script>

<style lang="less">
.ant-input-affix-wrapper .ant-input:not(:last-child){
    padding-right: 25px !important;
}
.imgBox{
    width: 32px;
    height: 32px;
    border-radius: 5%;
    background-color: #ccc;
    margin-right: 10px;
    flex-shrink: 0;
}
.nameTitle{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(221, 169, 85, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .TabsItem {
      padding: 10px 0;
      width: 70px;
      position: relative;
      margin-right: 24px;
      text-align: center;
      cursor: pointer;
      margin-bottom: 20px;
      color: #000;
    }

    .TabsIndex {
      color: #dda955;
    }

    .TabsIndex::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 50px;
      height: 2px;
      background-color: #dda955;
    }
  }
}
</style>